<template>
  <div>
    <div class="header">
      <div class="header-left"
           @click="toHome"
           :style="styleBgcolor">
        <span class="iconfont">
          &#xe60e;
        </span>
      </div>
      <div class="header-like"
           :style="styleBgcolor">
        <span>☆</span>
      </div>
      <div class="header-more"
           :style="styleBgcolor">
        <span>•••</span>
      </div>
    </div>
    <div class="backcolor"
         :style="backgd">

    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      styleBgcolor: {
        backgroundColor: "rgba(0, 0, 0, 0.5)"
      },
      backgd: {
        opacity: 0
      }
    }
  },
  methods: {
    toHome () {
      this.$router.go(-1);
      // this.$router.push({ path: '/' })
    }
  },
  mounted () {
    let That = this;
    window.addEventListener("scroll", function () {
      let Top = document.documentElement.scrollTop;
      Top = Top / 100;
      let Top2 = (1 - Top) / 2
      let bgc = "rgba(0, 0, 0," + Top2 + ")";
      That.styleBgcolor = {
        backgroundColor: bgc
      }
      That.backgd = {
        opacity: Top
      }
      if (Top > 1) {
        That.styleBgcolor = {
          backgroundColor: "rgba(0, 0, 0, 0)"
        };
        That.backgd = {
          opacity: 1
        }
      }
    })
  }
}

</script>
<style scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  z-index: 333;
}
.header-left {
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  height: 0.7rem;
  width: 0.7rem;
  border-radius: 0.35rem;
  text-align: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}
.header-left span {
  position: absolute;
  font-size: 0.58rem;
  top: 0.08rem;
  left: 0.08rem;
}
.header-like {
  position: absolute;
  top: 0.1rem;
  right: 1rem;
  height: 0.7rem;
  width: 0.7rem;
  border-radius: 0.35rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.header-like span {
  position: absolute;
  font-size: 0.58rem;
  top: 0.04rem;
  left: 0.11rem;
  font-weight: bold;
}
.header-more {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  height: 0.7rem;
  width: 0.7rem;
  border-radius: 0.35rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.header-more span {
  position: absolute;
  font-size: 0.35rem;
  top: 0.16rem;
  left: 0.12rem;
}
.backcolor {
  height: 1rem;
  background: #00bcd4;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
}
</style>